<template>
  <div class="order-list">
    <el-card
      shadow="always"
      :body-style="{ padding: '20px' }"
    >
      <div slot="header">
        <span>订单管理</span>
      </div>
      <!-- card body -->
      <el-form
        :inline="true"
        :model="orderForm"
        class="demo-form-inline"
      >
        <el-form-item label="订单号">
          <el-input v-model="orderForm.orderNo"></el-input>
        </el-form-item>
        <el-form-item label="收货人">
          <el-input v-model="orderForm.consignee"></el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="orderForm.phone"></el-input>
        </el-form-item>
        <el-form-item label="订单状态">
          <el-select v-model="orderForm.orderState">
            <el-option
              v-for="item in options"
              :key="item.label"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="下单时间">
          <el-date-picker
            v-model="orderForm.date"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="top"
          >
          </el-date-picker>
          <el-button
            type="primary"
            @click="handleSearchOrder"
            >查询</el-button
          >
          <el-button
            type="default"
            @click="handleResetForm"
            >重置</el-button
          >
        </el-form-item>
      </el-form>

      <el-table
        border
        :data="tableData"
        :style="{ width: w + 'px' }"
      >
        <el-table-column
          fixed
          prop="orderNo"
          label="订单号"
          width="150"
        >
        </el-table-column>
        <el-table-column
          label="下单时间"
          width="180"
        >
          <span slot-scope="scope">{{ scope.row.orderTime | dateFmt }}</span>
        </el-table-column>
        <el-table-column
          prop="phone"
          label="手机号"
          width="120"
        >
        </el-table-column>
        <el-table-column
          prop="consignee"
          label="收货人"
          width="120"
        >
        </el-table-column>
        <el-table-column
          prop="deliverAddress"
          label="配送地址"
          width="180"
        >
        </el-table-column>
        <el-table-column
          label="送达时间"
          width="180"
        >
          <span slot-scope="scope">{{ scope.row.deliveryTime | dateFmt }}</span>
        </el-table-column>
        <el-table-column
          prop="remarks"
          label="用户备注"
          width="120"
        >
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="100"
        >
          <template slot-scope="scope">
            <el-button
              @click="handleGoPage(scope.row.id, 'isDetail')"
              type="text"
              size="small"
              >查看</el-button
            >
            <el-button
              @click="handleGoPage(scope.row.id, 'isEdit')"
              type="text"
              size="small"
              >编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @current-change="handleCurrentChange"
        background
        :current-page="currentPage"
        layout="total, prev, pager, next ,jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
  </div>
</template>
<script>
import { getOrderList } from '@/api/order.js'
import { dateformat } from '@/filters'
import mixins from '@/mixins/index.js'
export default {
  mixins: [mixins],
  data() {
    return {
      currentPage: 1,
      pageSize: 4,
      total: 0,
      orderForm: {
        orderNo: '',
        consignee: '',
        phone: '',
        orderState: '',
        date: []
      },
      options: [
        {
          label: '待处理',
          value: '待处理'
        },
        {
          label: '已受理',
          value: '已受理'
        },
        {
          label: '派送中',
          value: '派送中'
        },
        {
          label: '已完成',
          value: '已完成'
        }
      ],
      tableData: []
    }
  },

  methods: {
    // 重置
    handleResetForm() {
      this.orderForm = {
        orderNo: '',
        consignee: '',
        phone: '',
        orderState: '',
        date: []
      }
    },
    async getOrderList() {
      const res = await getOrderList({
        currentPage: this.currentPage,
        pageSize: this.pageSize,
        ...this.orderForm,
        date:
          this.orderForm.date === null
            ? JSON.stringify([])
            : JSON.stringify(this.orderForm.date)
      })
      this.tableData = res.data
      this.total = res.total
    },
    handleSearchOrder() {
      // console.log()
      this.currentPage = 1
      // 转换成后台需要的 时间格式
      this.orderForm.date = this.orderForm.date.map((v) => dateformat(v))
      this.getOrderList()
    },
    handleGoPage(id, flag) {
      this.$router.push({
        path: `/order/orderedit?id=${id}&from=${flag}`
      })
    },
    // 跳转指定页
    handleCurrentChange(page) {
      this.currentPage = page
      this.getOrderList()
    }
  },
  created() {
    this.getOrderList()
  }
}
</script>
<style lang="scss" scoped>
::v-deep .el-button--primary {
  margin-left: 20px;
}
::v-deep .el-pagination {
  margin-top: 20px;
}
::v-deep .el-form {
  min-width: 1100px;
}
</style>
